<template>
  <div class="filter-container">
      <div class="filter-up">
        <span>字段：</span>
        <a-select v-model="filter.field" @change="selectFieldChange" placeholder="请选择" size="mini" style="width: 100px">
          <a-select-option 
            v-for="item in fields"
            :key="item.name"
            :value="item.name"
          >
            {{item.alia}}
          </a-select-option>
        </a-select>
        <a-select v-model="filter.filterType" v-if="filter.dataType === dataType.TEXT || filter.dataType === dataType.TEXT_AREA || filter.dataType === dataType.RADIO || filter.dataType === dataType.SELECT || filter.dataType === dataType.MEMBER || filter.dataType === dataType.PERSONNEL" placeholder="请选择" size="mini" style="width: 100px">
          <a-select-option 
            v-for="item in textOption"
            :key="item.value"
            :value="item.value"
          >
            {{item.alia}}
          </a-select-option>
        </a-select>
        <a-select v-model="filter.filterType" v-if="filter.dataType === dataType.NUMBER" placeholder="请选择" size="mini" style="width: 100px">
          <a-select-option 
            v-for="item in numberOption"
            :key="item.value"
            :value="item.value"
          >
            {{item.alia}}
          </a-select-option>
        </a-select>
        <a-select v-model="filter.filterType" v-if="filter.dataType === dataType.DATE" placeholder="请选择" size="mini" style="width: 100px">
          <a-select-option 
            v-for="item in dateOption"
            :key="item.value"
            :value="item.value"
          >
            {{item.alia}}
          </a-select-option>
        </a-select>
        <a-select v-model="filter.dateRange" v-if="filter.dataType === dataType.DATE" placeholder="请选择" size="mini" style="width: 100px">
          <a-select-option 
            v-for="item in dateDetailOption"
            :key="item.value"
            :value="item.value"
          >
            {{item.alia}}
          </a-select-option>
        </a-select>
        <span style="cursor: pointer"
          @click="deleteFilter(filter.uuid)"
        >
          x
        </span>
      </div>
      <div style="width: 100%; padding: 0 10px 0 20px">
        <a-select
          v-if="filter.dataType !== dataType.DATE && filter.dataType !== null"
          mode="tags"
          v-model="filter.values"
          style="width: 80%;"
          placeholder="请输入"
        >
        </a-select>
        <a-input-number 
          controls-position="right"
          style="width: 80%;"
          size="mini"
          v-model="filter.value"
          v-if="filter.dataType === dataType.DATE && (filter.dateRange === dateRange.PAST_SEVERAL_DAYS || filter.dateRange === dateRange.FEATURE_SEVERAL_DAYS)"
          :min="0">
        </a-input-number>
        
        <a-select v-model="filter.spliceType" @change="handleChange" v-if="index === 0" :defaultValue="0" size="mini" style="width: 20%">
          <a-select-option :value="0" >
            且
          </a-select-option>
          <a-select-option :value="1" >
            或
          </a-select-option>
        </a-select>
        <span 
          v-if="index !== 0"
          style="width: 20%;">
          {{filter.spliceType === 0 ? '且' : '或' }}
        </span>
      </div>
  </div>
</template>

<script>
import {DataType, FilterType, DateRange} from '../../filterConstant'
export default {
    props: {
      fields: Array,
      index: Number,
      filter: Object
    },
    data(){
      return {
        dataType: DataType,
        dateRange: DateRange,
        textOption: [
          {
            value: FilterType.INCLUDE,
            alia: '包含'
          },
          {
            value: FilterType.EQUAL,
            alia: '是'
          },
          {
            value: FilterType.BEGAIN,
            alia: '开头为'
          },
          {
            value: FilterType.END,
            alia: '结尾为'
          },
          {
            value: FilterType.EXCLUSIVE,
            alia: '不包含'
          },
          {
            value: FilterType.UNEQUAL,
            alia: '不是'
          }
        ],
        numberOption: [
          {
            value: FilterType.EQUAL,
            alia: '='
          },
          {
            value: FilterType.UNEQUAL,
            alia: '≠'
          },
          {
            value: FilterType.GREATER,
            alia: '>'
          },
          {
            value: FilterType.GREATER_EQUAL,
            alia: '>='
          },
          {
            value: FilterType.LESS,
            alia: '<'
          },
          {
            value: FilterType.LESS_EQUAL,
            alia: '<='
          }
        ],
        dateOption: [
          {
            value: FilterType.DATE_YES,
            alia: '日期是'
          },
          {
            value: FilterType.DATE_NO,
            alia: '日期不是'
          }
        ],
        dateDetailOption: [
          {
            value: DateRange.TODAY,
            alia: '今天'
          },
          {
            value: DateRange.YESTERDAY,
            alia: '昨天'
          },
          {
            value: DateRange.TOMORROW,
            alia: '明天'
          },
          {
            value: DateRange.THIS_WEEK,
            alia: '本周'
          },
          {
            value: DateRange.LAST_WEEK,
            alia: '上周'
          },
          {
            value: DateRange.NEXT_WEEK,
            alia: '下周'
          },
          {
            value: DateRange.THIS_MONTH,
            alia: '本月'
          },
          {
            value: DateRange.LAST_MONTH,
            alia: '上月'
          },
          {
            value: DateRange.NEXT_MONTH,
            alia: '下月'
          },
          {
            value: DateRange.PAST_SEVERAL_DAYS,
            alia: '过去...天'
          },
          {
            value: DateRange.FEATURE_SEVERAL_DAYS,
            alia: '将来...天'
          }
        ],
      }
    },
    methods:{
      deleteFilter(uuid){
        this.$emit('deleteFilter', uuid)
      },
      handleChange(value){
        this.$emit('spliceChange', value)
      },
      selectFieldChange(value){
        let field = this.fields.find(f => f.name === value)
        this.filter.dataType = field.dataType
        switch(field.dataType){
          case DataType.TEXT:
            this.filter.filterType = FilterType.INCLUDE
            break
          case DataType.NUMBER:
            this.filter.filterType = FilterType.EQUAL
            break
          case DataType.DATE:
            this.filter.filterType = FilterType.DATE_YES
            this.filter.dateRange = DateRange.TODAY
            break
        }
      }
    }
}
</script>

<style lang="less">
.filter-container{
    padding: 5px 15px;
}
.filter-up{
    padding: 5px 15px;
    display: flex;
    justify-content: space-around;
}
</style>